<template>
	<view class="n-file-content">
		<view v-if="files.length === 0" class="no-data">
			<text>无附件</text>
		</view>
		<view v-else>
			<view class="file-list" v-for="item in files" :key="item.fileId" @click="show(item)">
				<image class="file-img" :src="getIcon(item)"></image>
				<view class="file-content">
					<view class="file-name">{{item.fileName}}</view>
					<view class="file-size" v-if="item.fileSize">{{ getFileSize(item) }}</view>
				</view>
				<view class="file-opt" @click.stop="showMoreOpts($event, item)" v-if="canEdit">
					<image src="../../static/images/icon/more-white.png"></image>
				</view>
			</view>
		</view>
		
		<bubble-popup v-model="showOpt" :popData="optData" :x="popupX" :y="popupY" dynamic :triangle="false" @tapPopup="tapPopup"></bubble-popup>
		
		<uni-popup ref="popup" type="dialog">
		    <uni-popup-dialog mode="input" title="重命名" :value="currentFile.fileName" @confirm="rename"></uni-popup-dialog>
		</uni-popup>
	</view>
	
</template>

<script>
	import * as sqliteUtil from '@/utils/sqlite.js'
	import { notice, file, utilities } from '@/utils/common.js'
	
	export default {
		props: {
			files: {
				type: Array,
				default() {
					return []
				}
			},
			canEdit: {
				type: Boolean,
				default: false
			},
			collectionId: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				currentFile: {},
				showOpt:false,
				popupX: 0,
				popupY: 0,
				optData:[
					{
						title: '重命名',
						icon: require('../../static/images/icon/edit.png'),
						value: 'rename'
					},
					{
						title: '删除',
						icon: require('../../static/images/icon/delete.png'),
						value: 'delete'
					}
				]
			}
		},
		methods: {
			getIcon(item) {
				if(file.checkIsImg(item)) {
					return '/static/images/icon/image-ico.png'
				} else if(file.checkIsAudio(item)) {
					return '/static/images/icon/audio.png'
				} else if(file.checkIsVideo(item)) {
					return '/static/images/icon/video.png'
				} else if(item.ext === 'txt') {
					return '/static/images/icon/txt-ico.png'
				} else if(item.ext === 'pdf') {
					return '/static/images/icon/pdf-ico.png'
				} else if(item.ext === 'docx' || item.ext === 'doc') {
					return '/static/images/icon/word-ico.png'
				} else if(item.ext === 'xls' || item.ext === 'xlsx') {
					return '/static/images/icon/excel-ico.png'
				} else {
					return '/static/images/icon/attachment.png'
				}
			},
			getFileSize(item) {
				let size = file.getFileSize(item.fileSize)
				if(size > 1000) {
					size = (size / 1024).toFixed(2) + "MB"
				} else {
					size = size + "KB"
				}
				return size
			},
			show(item) {
				if(file.checkIsImg(item)) {
					uni.previewImage({
						urls: [item.filePath]
					});
				} else if(file.checkIsVideo(item)) {
					uni.navigateTo({
						url: "/pages/base/video?filePath="+item.filePath
					})
				} else if(file.checkIsAudio(item)) {
					uni.navigateTo({
						url: "/pages/base/audio?filePath="+item.filePath+"&fileName="+item.fileName
					})
				} else {
					let fileName = item.fileName + "." + item.ext
					file.downloadFile(item.fileId, fileName)
				}
			},
			showMoreOpts(e, item) {
				this.popupX = e.detail.x
				this.popupY = e.detail.y - 8
				
				this.showOpt = !this.showOpt
				this.currentFile = item
			},
			tapPopup(e) {
				if(e.value == 'rename') {
					this.$refs.popup.open()
				} else if(e.value == 'delete') {
					this.deleteFile(this.currentFile)
				}
			},
			rename(val) {
				// 更新附件表
				let info = [
					{
						key: "file_name",
						value: val
					}
				]
				let condi = [
					{
						key: "id",
						value: this.currentFile.id
					}
				]
				sqliteUtil.modifyTableInfo('m_cpis_file_attachment', info, condi)
				this.$refs.popup.close()
				this.$emit('reload')
			},
			deleteFile(item) {
				const _this = this
				uni.showModal({
				    title: _this.$t('baseCommon.message.tips'),
				    content: '确定要删除该文件吗？',
				    success: function (res) {
				        if(res.confirm) {
							let files = _this.files
							for(let i=0; i<files.length; i++) {
								if(files[i].id === item.id) {
									files.splice(i, 1)
								}
							}
							sqliteUtil.deleteTableInfo('m_cpis_file_attachment', 'id', item.id)
							_this.$emit('reload')
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.n-file-content {
		width: 100%;
		background-color: #fff;
	}
	
	.file-list {
		margin-top: 8px;
		display: flex;
		align-items: center;
		width: 100%;
		
		.file-img { 
			height: 35px;
			width: 40px;
		}
		
		.file-content {
			width: calc(100% - 116px);
			margin: 0 8px;
			font-size: 14px;
			
			.file-name {
				white-space: nowrap;/*设置不换行*/
				overflow: hidden; /*设置隐藏*/
				text-overflow: ellipsis; /*设置隐藏部分为省略号*/
			}
			
			.file-size {
				color: $uni-text-color-grey;
			}
		}
		
		.file-opt {
			height: 30px;
			width: 60px;
			background-color: #1e90e6;
			border-radius: 5px;
			display: flex;
			justify-content: center;
			
			image {
				width: 30px;
				height: 30px;
			}
		}
	}
	
	.no-data {
		margin: 10px;
		
		text {
			color: #999;
		}
	}
</style>
